<template>
  <div class="search-suggest">
    <van-cell
      icon="search"
      :key="index"
      v-for="(item,index) in suggestsText"
      @click="$emit('search',item)"
    >
      <div slot="title" v-html="highlight(item)"></div>
    </van-cell>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { suggestionAPI } from '@/api/search'
// 防抖函数
import { debounce } from 'lodash'
export default {
  name: 'SearchSuggest',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    searchText: {
      type: String,
      require: true
    }
  },
  data () {
    // 这里存放数据
    return {
      suggestsText: [],
      choiceText: '',
      htmltext: ''
    }
  },
  // 计算属性 类似于data概念
  computed: {

  },
  // 监控data中的数据变化
  watch: {
    searchText: {
      // 当searchText发生改变时调用handler函数
      // handler函数名称是固定的
      handler: debounce(function (value) {
        this.getSuggestion(value)
      }, 500),
      // 该回调将在监听开始后立刻调用
      immediate: true
    }
  },
  // 方法集合
  methods: {
    async getSuggestion (value) {
      try {
        const { data } = await suggestionAPI(value)
        this.suggestsText = data.data.options
      } catch (error) {

      }
    },
    // 搜索文字高亮
    highlight (text) {
      const highlightStr = `<span style="color:red">${this.searchText}</span>`
      // 正则表达式//中间的内容都会当做匹配字符使用
      // 如果需要根据数据变量动态创建正则表达式，则手动new RegExp
      // RegExp正则表达式构造函数
      // 参数1：匹配模式字符串，他会根据这个字符串创建正则对象
      // 参数2：匹配模式，要写到字符串中
      const reg = new RegExp(this.searchText, 'gi')
      return text.replace(reg, highlightStr)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () {
  }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang='less'>
</style>
